.networkContainer {

  .vis-network {
    overflow: visible;
  }

  .vis-tooltip {
    background: $gray05;
    border-radius: 3px;
    color: $white;
    font-size: 0.4em;
    padding: 0.625em;
    position: absolute;
    transform: translate(-45%, 65px);

    &::after {
      border-color: transparent transparent $gray05;
      border-style: solid;
      border-width: 8px;
      content: '';
      height: 0;
      left: 50%;
      margin-left: -8px;
      position: absolute;
      top: -15px;
      width: 0;
    }
  }

  /*
   * navigation buttons on the graph
   */
  .vis-navigation {
    position: fixed;
    bottom: 3em;
    right: 3em;
    background: white;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
  }

  .vis-button {
    padding: 10px 15px;
    background-image: none !important;
    display: inline-block;
    font-weight: 700;
    border-right: 1px solid #eee;
    @include transition(background 0.8s);
    background-position: center;
    background-color: white;

    &:hover {
      box-shadow: none !important;
      background: $gray07 radial-gradient(circle, transparent 1%, $gray07 1%)
      center/1500000%;
    }

    &:after {
      font-size: 1em;
      color: $gray02;
    }

    &:active {
      background-color: $gray08;
      background-size: 100%;
      @include transition(background 0s);
    }
  }

  .vis-up,
  .vis-down,
  .vis-left,
  .vis-right {
    display: none;
  }

  .vis-zoomIn:after {
    content: '+';
  }

  .vis-zoomOut:after {
    content: '−';
  }

  .vis-zoomExtends:after {
    content: '⤢';
  }
}
